<template>
  <div class="wrapper p-4">
    <el-select class="my-3" placeholder="请选择" size="small" style="width: 254px;" v-model="ctrlType">
      <el-option :value="0" label="广播"></el-option>
      <el-option :value="1" label="组控"></el-option>
    </el-select>

    <div v-if="ctrlType==1">
      <label>组选择：</label>
      <el-select size="small" class="w190" v-model="groupNo">
        <el-option :value="-1" label="请选择"></el-option>
        <el-option v-for="(item,index) in geoups" :key="index" :value="index+1" :label="item"></el-option>
      </el-select>
    </div>

    <ul class="d-flex  flex-wrap tagGroup mt-3">
      <li v-for="index in 3" class="mr-4 d-flex align-items-center justify-content-center" style="font-size:16px;font-weight:500"
      :class="{active:lightNos.includes(index)}"  @click="lingtNosChnage(index)">
        <i class="iconfont icon-lamp mr-1"></i>
        <span>{{index}}</span></li>
    </ul>

    <div class="d-flex align-items-center" style="margin-left: -15px;">
      <i class="iconfont icon-lamp-on mr-0"></i>
      <el-progress :percentage="percentageVal" :stroke-width="20" :text-inside="true" class="w200 dimmingLevel"></el-progress>
<!--      <el-input v-model="percentageVal" size="small" class="w50 ml-3" ></el-input>-->
      <el-input-number v-model="percentageVal" controls-position="right" :min="0" :max="100" size="small" class="w80 ml-3"></el-input-number>
    </div>
    <div class="d-flex">
      <ul class="onOffGroup  d-flex justify-content-around mr-3"  @click="dimmingFun" :class="{'on':dimmingLevel==100,'off':dimmingLevel==0}">
        <li :class="{'notAllowed':btnState}" :style="{'visibility': dimmingLevel==100?'visible':'hidden'}">关</li>
        <li :class="{'notAllowed':btnState}" :style="{'visibility': dimmingLevel==0?'visible':'hidden'}">开</li>
      </ul>
      <el-button class="ur-btn dimmingBtn ml-2" @click="lightDimming" :disabled="btnState">调光</el-button>
    </div>

  </div>
</template>

<script>
  import api from 'api/api'
  import {mapState} from 'vuex'

  export default {
    components: {},
    props: {
      box:{
        type:Object,
        default:{}
      }
    },
    data() {
      return {
        ctrlType: 0,
        lightNos:[1,2],
        dimmingLevel:0,
        percentageVal:0,
        groupNo:-1,
        geoups:[]
      }
    },
    watch: {
      box:{
        handler(newValue, oldValue) {
          this.box = newValue
          this.queryGroups()
        },
        deep: true
      }
    },
    computed: {
      ...mapState({
        btnState: state => state.user.btnState,
      })
    },
    methods: {
      lingtNosChnage(index){
        if (this.lightNos.includes(index)) {
          let start = this.lightNos.indexOf(index)
          this.lightNos.splice(start, 1)
        } else {
          this.lightNos.push(index)
        }
      },
      dimmingFun(val){
        if(this.btnState) return //不能操作
        this.dimmingLevel=this.dimmingLevel==0?100:0
        this.percentageVal=this.percentageVal==0?100:0
       /* this.dimmingLevel=val
        this.percentageVal=val*/
        if(this.dimmingLevel==0){
          this.lightOffFun()
        }else if(this.dimmingLevel==100){
          this.lightOnFun()
        }
      },
      lightOnFun(){
        let url,params=''
        if(this.ctrlType==0){//广播
          url="/Communication/LightOnAll"
          params={EccAddr:this.box.Addr,LightNos:this.lightNos}
        }
        else{//组
          if (this.groupNo == -1) return this.$message.warning('请选择分组')
          url = "/Communication/LightOnGroup"
          params = {EccAddr: this.box.Addr, LightNos: this.lightNos, GroupNo: this.groupNo}
        }
        this.$store.commit('user/SET_BTN_STATE',true)
        api.fetchSimple(url,params)
            .then(r=>{
              this.$store.commit('user/SET_BTN_STATE',false)
              if (r.CmdState == 0) {
                this.$message.success({showClose:true,message:'开灯成功!'})
              } else {
                this.$message.error({showClose:true,message:this.global.cmdStatus[r.CmdState]})
              }
            })
      },
      lightOffFun(){
        let url,params=''
        if(this.ctrlType==0){//广播
          url="/Communication/LightOffAll"
          params={EccAddr:this.box.Addr,LightNos:this.lightNos}
        }
        else{//组
          if (this.groupNo == -1) return this.$message.warning('请选择分组')
          url = "/Communication/LightOffGroup"
          params = {EccAddr: this.box.Addr, LightNos: this.lightNos, GroupNo: this.groupNo}
        }
        this.$store.commit('user/SET_BTN_STATE',true)
        api.fetchSimple(url,params)
            .then(r=>{
              this.$store.commit('user/SET_BTN_STATE',false)
              if (r.CmdState == 0) {
                this.$message.success({showClose:true,message:'关灯成功!'})
              } else {
                this.$message.error({showClose:true,message:this.global.cmdStatus[r.CmdState]})
              }
            })
      },
      lightDimming(){
        if(this.btnState) return //不能操作
        let url,params=''
        if(this.ctrlType==0){//广播
          url="/Communication/LightDimmingAll"
          params={EccAddr:this.box.Addr,LightNos:this.lightNos,LightLevel:(this.percentageVal/5).toFixed(0)}
        }
        else{//组
          if (this.groupNo == -1) return this.$message.warning('请选择分组')
          url = "/Communication/LightDimmingGroup"
          params = {EccAddr: this.box.Addr, LightNos: this.lightNos, GroupNo: this.groupNo,LightLevel:(this.percentageVal/5).toFixed(0)}
        }
        this.$store.commit('user/SET_BTN_STATE',true)
        api.fetchSimple(url,params)
            .then(r=>{
              this.$store.commit('user/SET_BTN_STATE',false)
              if (r.CmdState == 0) {
                this.$message.success({showClose:true,message:'调光成功!'})
              } else {
                this.$message.error({showClose:true,message:this.global.cmdStatus[r.CmdState]})
              }
            })
      },
      queryGroups(){
        api.fetchSimple('/ViewInfo/QueryGroupById',{BoxId:this.box.BoxId})
            .then(r=>{
              let list=[]
              r.map(group=>{
                list[group.groupNo] = group.groupName
              })
              for (var i = 1; i < 16; i++) {
                if (list[i] != undefined) {
                  this.geoups.push(list[i])
                } else {
                  if (i < 10) {
                    this.geoups.push('组0' + i)
                  }else{
                    this.geoups.push('组' + i)
                  }
                }
              }
            })
      },
    },
    created() {
      this.$store.commit('user/SET_BTN_STATE',false)
      this.queryGroups()
    },
    mounted() {
    }
  }
</script>
<style lang="stylus" rel="stylesheet/stylus">
  .tagGroup{
    li{
      width:74px;height:40px;line-height:40px !important;text-align:center;color:#6B82CB;margin:0 15px 15px 0;background: rgba(49, 62, 92,.2);
      &:nth-child(4n){margin-right :0}
      &.active{
        background:url("~static/image/comm/line_active_bg.png") no-repeat;color:#fff;
        .icon-lamp{background:url("~static/image/comm/icon-lamp_active.png") no-repeat;}
      }
      &:not(.active):hover{color:#9FB2EF;background:rgba(49, 62, 92,.3) url("~static/image/comm/btn_bg.png") no-repeat;background-position :center center; }
    }
  }
  .dimmingBtn{
    width:74px; height:32px; background:rgba(49,62,92,0.5); border-radius:4px;color :#fff;text-align:center;line-height :30px;cursor :pointer;
    &:hover{background:rgba(49,62,92,0.6);}
    &:focus{background:rgba(49,62,92,0.8);}
  }
  .onOffGroup{width 74px;height 32px;line-height:32px;color:#fff;
    &.on{background:url("~static/image/comm/switchOn.png") no-repeat;}
    &.off{background:url("~static/image/comm/switchOff.png") no-repeat;}
  }
</style>
